<script>
import {mapState} from "./utils";
export default {
    name: "App",
    // 未使用mapState
    // computed:{
    //     liuXiaoLe(){
    //         return this.$store.state.liuXiaoLe;
    //     },
    //     geBinJie(){
    //         return this.$store.state.geBinJie;
    //     },
    //     renYiHao(){
    //         return this.$store.state.renYiHao;
    //     },
    //     shenXiaoXu(){
    //         return this.$store.state.shenXiaoXu;
    //     }
    // }

    // 使用mapState一
    computed:mapState(["liuXiaoLe","shenXiaoXu","renYiHao","geBinJie"]),

    // 使用mapState二
    // computed:mapState({
    //     liuXiaoLe(state){
    //         return state.liuXiaoLe;
    //     },
    //     geBinJie(state){
    //         return state.geBinJie;
    //     },
    //     renYiHao(state){
    //         return state.renYiHao;
    //     },
    //     shenXiaoXu(state){
    //         return state.shenXiaoXu;
    //     }
    // })

}
</script>

<template>
    <div>
        <h3>App</h3>
        <button>刘小乐：{{$store.state.liuXiaoLe}}|{{liuXiaoLe}}</button>
        <button>戈斌杰：{{$store.state.geBinJie}}|{{geBinJie}}</button>
        <button>任逸豪：{{$store.state.renYiHao}}|{{renYiHao}}</button>
        <button>沈晓旭：{{$store.state.shenXiaoXu}}|{{shenXiaoXu}}</button>
    </div>
</template>

<style scoped>
button{
    padding:5px;
    margin:5px;
}
</style>